<style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      height:93.5vh
    }
    
    body > .el-container {
      margin-bottom: 40px;
    }
    html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
    }
  </style>
<template>
    <el-container>
      <el-header>UDP组播性能测试</el-header>
      <el-container >
        <el-aside width="200px">
          <el-menu router   style="background-color: rgb(211, 220, 230)">
            <el-menu-item index="/showLog">
              <i class="el-icon-setting"></i>
              <span slot="title">实时</span>
            </el-menu-item>
            <el-menu-item index="/UDPsender">
              <i class="el-icon-setting"></i>
              <span slot="title">发送方</span>
            </el-menu-item>
            <el-menu-item index="/acceptor">
              <i class="el-icon-setting"></i>
              <span slot="title">接收方</span>
            </el-menu-item>
            
          </el-menu>
        </el-aside>
        <el-main>
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </template>
  <script>
    export default {
      data() {
        return {
          activeName: 'second'
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        }
      }
    };
  </script>
  